<template>
  <div>
    <!--咨询登记 -->
    <!-- 搜索 -->
    <el-card class="card">
      <el-form ref="ruleFormRef" :inline="true" class="demo-form-inline" :model="params">
        <el-form-item label="咨询人姓名：" prop="name">
          <el-input v-model="params.name" clearable placeholder="请输入咨询人姓名" />
        </el-form-item>
        <el-form-item label="老人姓名：" prop="customerName">
          <el-input v-model="params.customerName" clearable placeholder="请输入老人姓名" />
        </el-form-item>
        <el-form-item label="回访状态：" prop="state">
          <el-select v-model="params.state!" clearable style="width: 200px">
            <el-option v-for="item in stateList" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search">查询</el-button>
          <el-button :icon="Refresh" @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card class="card">
      <ELTable v-bind="tableConfig" ref="questionTable">
        <template #btns="{ deleteAll }">
          <el-button type="primary" @click="add">新增咨询</el-button>
          <el-button :icon="Delete" type="danger" @click="deleteAll">批量删除</el-button>
        </template>
        <template #operate="{ scope, deleteHandle }">
          <el-button type="primary" :icon="Edit" text @click="update(scope.row.id)">编辑</el-button>
          <el-button type="danger" :icon="Delete" text @click="deleteHandle(scope.row.id)">
            删除
          </el-button>
          <el-button type="primary" :icon="Document" text @click="toDetail(scope.row.id)">
            详情
          </el-button>
          <el-button type="primary" :icon="ChatLineSquare" text @click="toCallback(scope.row.id)">
            回访记录
          </el-button>
        </template>
      </ELTable>
    </el-card>
    <AddQuestion v-if="dialogVisible" :id="updateId" @close="closeHandle" />
    <QuestionDetail v-if="detailDialogVisible" :id="updateId" @close="closeDetail" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ListParams } from "../../api/market/question/type";
import type { FormInstance } from "element-plus";
import ELTable, { TableData } from "../../components/ELTable.vue";
import {
  addQuestion,
  getQuestionList,
  delQuestion,
  delMany,
} from "../../api/market/question/question";
import AddQuestion from "../../components/market/question/AddQuestion.vue";
import QuestionDetail from "../../components/market/question/QuestionDetail.vue";
import { Delete, Edit, ChatLineSquare, Document, Search, Refresh } from "@element-plus/icons-vue";
import router from "@/router";
const ruleFormRef = ref<FormInstance>();

//搜索参数
const params = reactive<ListParams>({});

//状态
const stateList = ref([
  { id: 0, name: "待回访" },
  { id: 1, name: "已回访" },
]);

//新增dialog
let dialogVisible = ref(false);
let detailDialogVisible = ref(false);
const questionTable = ref();

const tableConfig = reactive<TableData>({
  loadData: getQuestionList,
  delete: delQuestion,
  deleteAll: delMany,
  columns: [
    {
      prop: "id",
      label: "序号",
      attrs: {
        with: 30,
      },
    },
    {
      prop: "type",
      label: "咨询类型",
    },
    {
      prop: "customerName",
      label: "老人姓名",
    },
    {
      prop: "source",
      label: "咨询渠道",
    },
    {
      prop: "name",
      label: "咨询人",
    },
    {
      prop: "mobile",
      label: "联系方式",
    },
    {
      prop: "relation",
      label: "与老人关系",
    },
    {
      prop: "addAccountName",
      label: "登记人",
    },
    {
      prop: "visitTime",
      label: "计划回访日期",
      attrs: {
        width: 150,
      },
    },
    {
      prop: "stateName",
      label: "回访状态",
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
      attrs: {
        width: 400,
      },
    },
  ],
});

//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

//查询
const search = () => {
  console.log(params);

  questionTable.value.getData(params);
};

//添加
const add = () => {
  updateId.value = 0;
  dialogVisible.value = true;
};

//关闭添加dialog
const closeHandle = (data: boolean) => {
  dialogVisible.value = false;
  if (data) {
    //刷新表格
    questionTable.value.getData();
  }
};

let updateId = ref(0);
//修改咨询登记
const update = (id: number) => {
  updateId.value = id;
  dialogVisible.value = true;
};
//咨询详情
const toDetail = (id: number) => {
  updateId.value = id;
  detailDialogVisible.value = true;
};
//跳转回访记录
const toCallback = (id: number) => {
  router.push(`/market/callback?id=${id}`);
};
//关闭详情dialog
const closeDetail = () => {
  detailDialogVisible.value = false;
};
</script>

<style scoped>
.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>
